The Box Model

Slides: OpenOffice PowerPoint
Reading: HFHTML Ch. 10

Homework: overdue overdue. Before you add or change files on your web site, prepare a version of what you want your web site to look like on your thumb drive. Use an FTP client to synchronize your web site to the version on your thumb drive.

Tools

FTP clients: FileZilla, FireFTP, and Net2FTP

Color keywords: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

To choose other colors

• color picker,
• color mixer, and
• sample colors.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab, part I

• Here is the code for chapter 10 from the text's web site.
• Download and unzip it into your My Documents directory.
• In the lounge folder for Chapter 10, create a file lounge.css containing:

    body {
       font-size: small;
       font-family: Verdana, Geneva, "DejaVu Sans", Arial, sans-serif;
    }
    
    h1, h2 {
        color: #077;
    }
    
    h1 {
        font-size: 150%;
    }
    
    h2 {
        font-size: 130%;
    }
  

• The link already exists in lounge.html, so, when you view the file you should see the effect of the above rules.
• Match the completed lounge page .
  To do this, alter the style for the guarantee paragraph:
  
  1. Add space around text (hint: padding).
  2. Increase all the margins.
  3. Add in the background image, images/background.gif and place a single copy of it in the upper left hand corner.
  4. Add a dashed white border around the text.
  5. Adjust the left padding and right margins to match the completed page.
• Validate your lounge.css file using the CSS validator: http://jigsaw.w3.org/css-validator
• (Optional) add the indicated icon to your "journal.html" web page.

Lab, part II

On your thumb drive:

• In your labs directory, create a subdirectory for today's lab.
• Transfer the lounge directory to this new subdirectory.
• Create a hyperlink from your labs directory's index.html to the page you worked on today.
• Style the credo paragraph (or some other paragraph) on your about me site to make it stand out. (Use at least 3 CSS rules.)

Lab, part III

• Using an FTP client, synchronize your web site to the image on your thumbdrive.

Always shut down your computer and turn off your display before leaving the lab.